<template>
  <v-touch class="wrapper" v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight">
    <div class="left-top-title">
      <div class="left-line black animated fadeIn"></div>
      <img class="animated fadeInLeft" src="static/interiorOfTheBuilding/title-en.png" alt="">
      <h1 class="animated fadeInLeft"><img src="static/interiorOfTheBuilding/title-zh.png" alt=""></h1>
    </div>
    <img class="background" src="static/interiorOfTheBuilding/background.png" alt="">
    <div class="right-nav">
      <ul>
        <li><img src="static/interiorOfTheBuilding/right-menu1.png" alt=""></li>
        <li><img src="static/interiorOfTheBuilding/right-menu2.png" alt=""></li>
        <li><img src="static/interiorOfTheBuilding/right-menu3.png" alt=""></li>
      </ul>
    </div>
    <left-menu></left-menu>
  </v-touch>
</template>

<script>
import leftMenu from '@/components/LeftMenu';

export default {
  components: {
    leftMenu,
  },
  methods: {
    onSwipeLeft() {
      // this.$router.push('/highEndHotel');
    },
    onSwipeRight() {
      this.$router.push('/functionLayout');
    },
  },
};
</script>

<style lang="stylus" scoped>
  .right-nav
    position absolute
    bottom 0px
    right 60px
    padding 200px 20px 50px 20px
    background linear-gradient(to top, #fff, transparent)
    ul
      li
        margin 25px 20px
</style>
